<template>
  <div class="assets-image-picker">
    <div class="image-preview" @click="openSelector()">
      <div v-if="value" class="left mr20">
        <el-image :src="value" :style="{ width: width, height: height }" class="preview-image" fit="fill"></el-image>
      </div>
      <div class="right">
        <slot><el-button>选择图片</el-button></slot>
      </div>
    </div>
    <input class="hidden" type="text" :value="value" />
    <image-panel v-if="selectorVisible" ref="selector" @selectFinish="selectFinish"></image-panel>
  </div>
</template>

<script>
import ImagePanel from "./image-panel";
export default {
  components: {
    ImagePanel,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "140px",
    },
    height: {
      type: String,
      default: "140px",
    },
  },
  data() {
    return {
      selectorVisible: false,
      currValue: this.value,
    };
  },
  methods: {
    openSelector() {
      this.selectorVisible = true;
      this.$nextTick(() => {
        this.$refs.selector.init();
      });
    },
    selectFinish(result) {
      this.$emit("input", result.fileUrl);
    },
  },
};
</script>

<style lang="scss">
.assets-image-picker {
  .image-preview {
    display: flex;
    width: fit-content;

    .preview-image {
      border-radius: 3px;
    }
  }
}
</style>
>
